<template>
  <div>
    <el-form>
      <el-table v-loading="loading" :data="subTableData" style="width: 100%" height="500">
        <el-table-column prop="tableName" label="子表名" align="center" width="200" />
        <el-table-column label="显示条件" align="center">
          <template slot-scope="scope">
            <subCondition ref="subCondition" :domains="scope.row.subDomains?scope.row.subDomains:[{}]" />
          </template>
        </el-table-column>
        <el-table-column :label="$t('操作')" align="center" width="140">
          <template slot-scope="scope">
            <el-button size="small" type="text" icon="el-icon-check" @click="updateHandle(scope.row)">{{ $t('保存') }}
            </el-button>
            <el-button size="small" type="text" icon="el-icon-delete" @click="removeHandle(scope.row)">{{ $t('移除') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div slot="footer" style="text-align: right;margin-top:5px">
      <el-button @click="cancel()">关 闭</el-button>
    </div>
  </div>
</template>

<script>
import { removeTableByName, getTableInfoByName, updateTableInfoByName } from '@/api/system/desform/onlineForm/onlCgformHead'
import subCondition from '@/components/desform/online/subCondition.vue'
export default {
  name: 'SubTableList',
  components: {
    subCondition
  },
  props: {
    subTable: {
      type: Object,
      required: true,
      default: () => ''
    }
  },
  data() {
    return {
      subTableData: [],
      loading: false
    }
  },
  watch: {
    subTable: {
      handler() {
        if (this.subTable.subTableStr) {
          this.subTableData = []
          const tempTable = this.subTable.subTableStr.split(',')
          this.loading = true
          tempTable.map(name => {
            getTableInfoByName(name).then(res => {
                const row = {
                tableName: name,
                  hideCondition: res.data.hideCondition,
                  subDomains: res.data.hideCondition ? JSON.parse(res.data.hideCondition) : [{}]
              }
              this.subTableData.push(row)
            })
          })
          this.loading = false
        } else {
          this.subTableData = []
        }
      },
      deep: true
    }
  },
  created() {
    if (this.subTable.subTableStr) {
          this.subTableData = []
          const tempTable = this.subTable.subTableStr.split(',')
          this.loading = true
          tempTable.map(name => {
            getTableInfoByName(name).then(res => {
                const row = {
                tableName: name,
                hideCondition: res.data.hideCondition,
                  subDomains: res.data.hideCondition ? JSON.parse(res.data.hideCondition) : [{}]
              }
              console.log(row, 'resresresresres')
              this.subTableData.push(row)
            })
          })
          this.loading = false
        } else {
          this.subTableData = []
        }
  },
  methods: {
    removeHandle(row) {
      this.$confirm('是否去除关联关系?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const tbName = row.tableName
        removeTableByName(tbName, this.subTable.id).then(res => {
          if (res.code && res.code === 200) {
            this.$message({ type: 'success', message: '移除成功!' })
          }
          this.$parent.$parent.removeSubTableStr(res.data)
        })
      })
    },
    cancel() {
      if (this.$parent.$parent.subDialogVisible !== undefined) {
        this.$parent.$parent.subDialogVisible = false
      }
    },
    updateHandle(row) {
      const data = {
        tableName: row.tableName,
        hideCondition: JSON.stringify(row.subDomains)
      }
      console.log(row, data, 'datadatadatadatadata')
      updateTableInfoByName(data).then(res => {
          if (res.code && res.code === 200) {
            this.$message({ type: 'success', message: '操作成功!' })
          } else {
            this.$message({ type: 'error', message: '操作失败!' })
          }
      })
    }
  }
}
</script>

<style scoped>
.buttons {
  margin-bottom: 10px;
}

/* 修改行的最小高度 */
.dataForm .el-row .el-form-item {
  min-height: 0px;
}
</style>
